<template>
  <div class="footer-wrap">
    <div class="footer-line"></div>
    <div class="footer-time">
      <svg style="width: 40px; height: 40px;">
        <g>
          <path
            class="st0"
            d="M20,0C9,0,0,9,0,20c0,11,9,20,20,20c11,0,20-9,20-20C40,9,31,0,20,0z M20,36.3c-8.8,0-15.8-7.6-15.8-16.3
		c0-8.8,7.1-16.3,15.8-16.3c8.8,0,15.8,7.6,15.8,16.3C35.8,28.7,28.8,36.3,20,36.3z"
          />
          <g>
            <rect x="19.1" y="7.2" class="st0" width="1.8" height="14.6" />
            <rect x="18.2" y="19.1" class="st0" width="13.5" height="1.8" />
          </g>
        </g>
      </svg>
    </div>
    <div class="footer-span">
      <strong>{{$t('com_footer.doLogin')}}</strong>
    </div>
    <div class="footer-btn" @click="toPage('sinUp')">
       {{$t('com_footer.regist')}}
    </div>
    <!-- <div class="footer-icons">
      <ul class="aside-social">
        <li>
          <a href="" class="iconfont icon-icon-test"></a>
        </li>
        <li>
          <a href="" class="iconfont icon-icon-test1"></a>
        </li>
        <li>
          <a href="" class="iconfont icon-icon-test2"></a>
        </li>
        <li>
          <a href="" class="iconfont icon-icon-test4"></a>
        </li>
        <li>
          <a href="" class="iconfont icon-icon-test5"></a>
        </li>
      </ul>
    </div> -->
    <div class="footer-advertise" style="margin-top: 40px">
      <div class="footer-advertise-item">
          <a href="javascript:;" @click="toPage('index')">{{$t('com_footer.index')}}</a>
      </div>
      <div class="footer-advertise-item">
          <a href="javascript:;" @click="toPage('introduce')">{{$t('com_footer.introduce')}}</a>
      </div>
      <div class="footer-advertise-item">
          <a href="javascript:;" @click="toPage('contact')">{{$t('com_footer.contact')}}</a>
      </div>
      <div class="footer-advertise-item">
          <a href="javascript:;" @click="toPage('login')"> {{$t('com_footer.gologin')}}</a>
      </div>
      <div class="footer-advertise-item">
        <a href="#">   {{$t('com_footer.top')}}</a>
      </div>
    </div>
    <div class="footer-line"></div>
    <div class="footer-last">
      <div class="footer-last-left">
        {{$t('com_footer.copyright')}}
      </div>
      <div class="footer-last-right">
       {{$t('com_footer.companyname')}} |  {{$t('com_footer.techsupport')}}
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    toPage(page) {
      const isLogin = JSON.parse(localStorage.getItem("isLogin"));
      if(page == 'index') {
        this.$router.push({
          path: '/index'
        }) 
      }else if(page == 'login') {
        if(isLogin) {
          Message.error("您已登录");
        }else {
          this.$router.push({
            path: '/login'
          })
        }
      }else if(page == 'sinUp') {
        if(isLogin) {
          Message.error("您已注册");
        }else {
          this.$router.push({
            path: '/sinUp'
          })
        }
      }else {
        this.$router.push({
          path: '/' + page
        })
        window.scroll(0,0);
      }
    }
  }
};
</script>

<style lang="less" scope>
.footer-wrap {
  width: 100%;
  padding: 0;
  margin: 40px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .footer-line {
    margin-top: 20px;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #b3b3b3;
  }
  .footer-time {
    width: 40px;
    height: 40px;
    margin-top: 40px;
  }
  .footer-span {
    margin-top: 40px;
    letter-spacing: 2px;
    color: #333;
  }
  .footer-btn {
    margin-top: 40px;
    background-color: #4d4d4d;
    padding: 5px 25px;
    color: #fff;
    cursor: pointer;
  }
  .footer-btn:hover {
    background-color: #f00;
  }
  .aside-social {
    margin: 80px 0;
    display: flex;
    justify-content: space-between;
    li a{
      padding: 0;
      font-size: 36px;
      color: #989898;
      border-bottom: 0px
    }
  }
  .footer-advertise {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .footer-advertise-item {
      border-right: 1px solid #333;
      padding: 0 10px;
      letter-spacing: 2px;
      a {
        color: #333;
      }
      a:hover {
        text-decoration: underline;
      }
    }
    .footer-advertise-item:last-child {
      border-right: 0px solid #333;
    }
  }
  .footer-last {
    margin-top: 20px;
    // margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .footer-last-right {
      a:hover {
        color: #f00;
        text-decoration: underline;
      }
    }
  }
}
.st0 {
  fill: #333333;
}
</style>